<template>
  <Poptip trigger="hover" popper-class="order-poptip-wrap" :transfer="true">
    <span style="text-decoration: underline;font-weight: bold;">{{ text }}</span>
    <div class="order-poptip" slot="content" v-if="content.length > 0">
      <p v-for="(item, index) in content" :key="index">
        {{ item.key }}：{{ item.value }}
      </p>
    </div>
    <div slot="content" v-else>暂无数据</div>
  </Poptip>
</template>

<script>
  export default {
    name: 'orderPoptip',
    props: {
      text: {
        default: ''
      },
      content: {
        default: [],
        type: Array
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-poptip {
    p {
      text-align: left;
    }
  }
</style>
